<template>
  <div class="bigdiv">
    <el-container>
      <el-aside class="aside">
        <img class="iconimg" src="../assets/image/account-logo.png" alt="">
        <el-menu active-text-color="#ffd04b" background-color="#222832" class="el-menu-vertical-demo"
          :default-active="activeroute" text-color="#fff" :default-openeds="['0']" :router="true">
          <el-sub-menu v-for="(item, index) in menus " :key="item.id" :index="'' + index">
            <template #title>
              <!-- <el-icon>
                <location/>
              </el-icon> -->
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :index="menus.path" v-for="menus in item.subArry" :key="menus.id">
                <!-- <el-icon><Avatar /></el-icon> -->
                
                <el-icon color="#409efc" size="20">
                  <component :is="menus.icon"> </component>
                </el-icon>
                {{ menus.title }}
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside> 
      <el-container>
        <!-- 头部 -->
        <el-header class="shadow height flex">
          
          <div>

            {{ title }}
          </div>
          <div>
            <el-icon style="vertical-align: -15%;"><Avatar /></el-icon>
             <el-popover style="vertical-align: 65%;" placement="top-start" :width="200" trigger="hover">
              
              <div>
               <p>用户名：   {{ userInfo.loginUserName }}</p>
               <p>昵称： {{ userInfo.nickName }} </p>
               <el-button @click="gologin" type="success" round>退出</el-button>
              </div>
              <template #reference>
                <el-button class="m-2  yonghu"> {{ userInfo.nickName }}</el-button>
              </template>
            </el-popover>
            <el-icon style="vertical-align: -15%;"><CaretBottom /></el-icon>
          </div>
           
          
        </el-header>
        <!-- 中间 -->
        <el-main class="main">
          <router-view></router-view>
        </el-main>
        <!-- 底部 -->
        <el-footer class="shadow height flex color">
          <span>Copyright © 2019-2021 
          {{ userInfo.nickName }}
          . All rights reserved.</span>
          <span>买货通后台管理</span>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { Monitor,Odometer,Plus,PictureRounded,StarFilled,Sell,Pointer,Grid,Goods,Avatar,Tickets,Key,CaretBottom} from "@element-plus/icons-vue"
import {useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
import { onMounted, shallowRef, reactive, ref,computed  } from "vue"
import axios from "../ajax";
const route = useRoute()
const router= useRouter()
const menus = reactive([
  {
    id: 1,
    title: 'Dashboard',
    subArry: [
      {
        id: 1,
        title: "系统介绍",
        path: '/index/system',
        icon: shallowRef(Monitor)
      },
      {
        id: 2,
        title: "Dashboard",
        path: '/index/dashboard',
        icon: shallowRef(Odometer)
      },
      {
        id: 3,
        title: "添加商品",
        path: '/index/adddoods',
        icon: shallowRef(Plus)
      },
    ]
  },
  {
    id: 2,
    title: '首页配置',
    subArry: [
      {
        id: 1,
        title: "轮播图",
        path: '/index/loopimg',
        icon: shallowRef(PictureRounded)
      },
      {
        id: 2,
        title: "热销商品配置",
        path: '/index/hotgoods',
        icon: shallowRef(StarFilled)
      },
     
      {
        id: 3,
        title: "新品上线配置",
        path: '/index/newgoods',
        icon: shallowRef(Sell)
      },
      {
        id: 4,
        title: "为你推荐配置",
        path: '/index/recommend',
        icon: shallowRef(Pointer)
      },
     
    ]
  },
  {
    id: 3,
    title: '模块管理',
    subArry: [
      {
        id: 1,
        title: "分类管理",
        path: '/index/classify?categoryLevel=1&parentId=0',
        icon: shallowRef(Grid)
        
      },
      {
        id: 2,
        title: "商品管理",
        path: '/index/goods',
        icon: shallowRef(Goods)
        
      },
      {
        id: 3,
        title: "会员管理",
        path: '/index/vip',
        icon: shallowRef(Avatar)
      },
     
      {
        id: 4,
        title: "订单管理",
        path: '/index/order',
        icon: shallowRef(Tickets)
      },
     
    ]
  },
  {
    id:4,
    title: '系统管理',
    subArry: [
      {
        id: 1,
        title: "修改密码",
        path: '/index/code',
        icon: shallowRef(Key)
      },
     
    ]
  }
])
const title = ref('')
const activeroute = ref('')
onMounted(() => {
  // console.log();
  title.value = route.meta.title
  activeroute.value = route.path=="/index/classify"?"/index/classify?categoryLevel=1&parentId=0":route.path
 getUserInfo()
})
onBeforeRouteUpdate((to, from) => {
  // console.log("路由更新");
  title.value = to.meta.title
  activeroute.value = route.path=="/index/classify"?"/index/classify?categoryLevel=1&parentId=0":route.path

  // console.log(activeroute.value , route.path);

})








 let gologin=()=>{
  localStorage.removeItem("token");
  router.replace("/login");
 }
 import { useStore } from "../stores/user";
 const user_store=useStore();
 const userInfo=computed(()=>user_store.userInfo)//计算属性只读

 const {getUserInfo} =user_store;//不能使用storeToRefs解构函数，可以重起名字
</script>

<style lang="scss" scoped>
// .ictionconter{
  
// }
.bigdiv{
  width: 100%;
  height:100%;
}
.aside {
  background: #222832;
  width: 200px;
  height: 100vh;
}

.height {
  line-height: 60px
}

.main {
  height: 50vh
}

.shadow {
  box-shadow: 0 0 10px #e4e4e4;
}
.flex{
  display: flex;
  justify-content: space-between;
}
.yonghu{
  margin: auto 0;
}
.iconimg{
  margin: 10px auto;
    display: block;
  width: 150px;
  height: 50px;
}
.flex{
  display: flex;
  justify-content: space-between;
}
.color{
  color: gray;
}
</style>